<template>
	<!-- 帖子详情页 -->

	<div class="mainBody">
		<!-- <div class="Back">
			<el-page-header @back="goBack" content="详情页面">
			</el-page-header>
		</div> -->
		<div class="postDetailBody">
			<el-card class="box-card2">
				<div style="display: flex;align-items: center;">
					<el-avatar :size="50">
						<img :src="$store.state.imgShowRoad2 + '/file/' + PostData.avatar" />
					</el-avatar>
					<span style="margin-left: 10px; font-size: 14px;">{{PostData.nickName}}</span>
				</div>
				
				<h2>{{PostData.postName}}</h2>
				<div class="content_click">{{PostData.createTime}}</div>
				<div class="w-e-text">
					<div v-html="PostData.postContent"></div>
				</div>
			</el-card>
			<!-- <el-card class="box-card1">
				<el-avatar :size="50">
					<img :src="$store.state.imgShowRoad2 + '/file/' + PostData.avatar" />
				</el-avatar>
			</el-card> -->
		</div>
		<el-card class="box-card3">
			<div class="commentHead">
				<div class="commQuantity">
					<span class="pinglun">评论</span>
					<span class="shumu" v-for="(num,index) in CommentData.slice(0,1)" :key="index">
						{{num.totalComments}}
					</span>
				</div>
				<!-- <div class="commSort">
					<a href="#" :class="{active: sortBy === 'hot'}" @click="sortBy = 'hot'"
						style="margin-right: 5px;">最热</a>
					<span>|</span>
					<a href="#" :class="{active: sortBy === 'new'}" @click="sortBy = 'new'"
						style="margin-left: 5px;">最新</a>
				</div> -->
			</div>
			<div class="commentInput" v-if="$store.getters.gettoken">
				<el-avatar :size="60" :fit="fit" :src="$store.state.imgShowRoad2 + '/file/' + userInfo.avatar">
				</el-avatar>
				<!-- @focus="showButton = true" @blur="showButton = false" -->
				<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="input" clearable resize="none"
					style="flex: 1;" >
				</el-input>
			</div>
			<div class="commentInput" v-else>
				<el-avatar :size="60" src="https://empty" @error="errorHandler">
					<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
				</el-avatar>
				<el-input style="flex: 1;" type="textarea" resize="none" placeholder="登录后才可评论哦" v-model="input"
					:disabled="true">
				</el-input>
			</div>
			<div class="issueBtn" v-if="$store.getters.gettoken">
				<!-- v-if="showButton" -->
				<el-button type="primary"  @click="postAddComment">发布</el-button>
			</div>
			<div class="issueBtn" v-else>
				<!-- v-if="showButton" -->
				<el-button type="primary"  @click="postAddComment" disabled>发布</el-button>
			</div>
			<div class="commentMain">
				<div class="ReplyDetails" v-for="(item,index) in CommentData" :key="index">
					<!-- 根评论 -->
					<div class="rootReview">
						<el-avatar :size="60" :fit="fit" :src="$store.state.imgShowRoad2 + '/file/' + item.userAvatar">
						</el-avatar>
						<div class="content-warp">
							<div class="uNickname">{{item.nickname}}</div>
							<span class="reply-content" style="margin: 10px 0 10px 0;">{{item.commentContent}}</span>
							<div class="content_click">
								<div class="content_time">
									{{item.createTime}}
								</div>
								<span class="reply" @click="replyReview(item.commentId)">回复</span>
							</div>
							<div v-if="showReplyInput[item.commentId]" class="replyInput">
								<el-input type="textarea" :placeholder="'@'+item.nickname" v-model="replyInput"
									clearable resize="none" class="custom-input">
								</el-input>
								<el-button type="primary" style="margin-left: 20px;width: 100px;"
									@click="submitReply(item.userId,item.commentId,index)">发布</el-button>
							</div>
						</div>
					</div>
					<!-- 子评论 -->
					<div class="subComment" v-if="item.children && item.children.length">
						<div class="commContent" v-for="(comm,ind) in item.children.slice(0, 3)" :key="ind">
							<el-avatar :size="40" :fit="fit"
								:src="$store.state.imgShowRoad2 + '/file/' + comm.userAvatar">
							</el-avatar>
							<div class="content-warp">
								<div class="replyContent">
									<span class="reply-content" style="flex: 1;">
										<span class="uNickname">{{comm.nickname}}</span>
										<span class="replyWords">回复</span>
										<span class="replyWords2">@{{comm.toCommentNickName}}:</span>
										{{comm.commentContent}}
									</span>
								</div>
								<div class="content_click">
									<div class="content_time">
										{{comm.createTime}}
									</div>
									<span class="reply" @click="replyReview(comm.commentId)">回复</span>
								</div>
								<div v-if="showReplyInput[comm.commentId]" class="replyInput">
									<el-input type="textarea" :placeholder="'@'+comm.nickname" v-model="replyInput"
										clearable resize="none" class="custom-input">
									</el-input>
									<el-button type="primary" style="margin-left: 20px;width: 100px;"
										@click="submitReply(comm.userId,item.commentId,ind)">发布</el-button>
								</div>
							</div>
						</div>
						<div class="clickView" v-if="!item.expanded && item.children.length>3"
							@click="expandReplies(index)">
							<span>
								共{{item.children.length}}条回复,
							</span>
							<span class="View">
								点击查看
							</span>
						</div>
						<div v-if="item.expanded">
							<div class="commContent" v-for="(commc,inde) in item.children.slice(3)" :key="inde">
								<el-avatar :size="40" :fit="fit"
									:src="$store.state.imgShowRoad2 + '/file/' + commc.userAvatar">
								</el-avatar>
								<div class="content-warp">
									<div class="replyContent">
										<span class="reply-content" style="flex: 1;">
											<span class="uNickname">{{commc.nickname}}</span>
											<span class="replyWords">回复</span>
											<span class="replyWords2">@{{commc.toCommentNickName}}:</span>
											{{commc.commentContent}}
										</span>
									</div>
									<div class="content_click">
										<div class="content_time">
											{{commc.createTime}}
										</div>
										<span class="reply" @click="replyReview(commc.commentId)">回复</span>
									</div>
									<div v-if="showReplyInput[commc.commentId]" class="replyInput">
										<el-input type="textarea" :placeholder="'@'+commc.nickname" v-model="replyInput"
											clearable resize="none" class="custom-input">
										</el-input>
										<el-button type="primary" style="margin-left: 20px;width: 100px;"
											@click="submitReply(commc.userId,item.commentId,inde)">发布</el-button>
									</div>
								</div>
							</div>
							<div class="clickView" @click="collapseReplies(index)">
								<span class="View">
									点击收起
								</span>
							</div>
						</div>
					</div>
					<div class="commentLine"></div>
				</div>
				<div class="footer_page">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	import postApi from "@/api/posts"
	export default {
		components: {

		},
		data() {
			return {
				total: 0,
				pageSize: 10,
				currentPage: 1,
				atomCurrentPage: 1,
				atomPageSize: 10,
				PostData: [],
				CommentData: [],
				AtomData: [],
				userInfo: {},
				sortBy: "hot",
				fit: 'cover',
				input: '', //评论内容
				replyInput: '', //回复内容
				showReplyInput: [],
				showButton: false,
				expanded: false, //回复内容隐藏与展开
			}
		},
		methods: {
			replyReview(index) {
				if (this.$store.getters.gettoken == null) {
					this.$message.warning('您还未登录！');
				} else {
					if (this.showReplyInput[index]) {
						this.$set(this.showReplyInput, index, false);
					} else {
						// 否则，先将所有评论的回复输入框收起，再打开当前点击的输入框
						this.showReplyInput = this.showReplyInput.map(() => false);
						this.$set(this.showReplyInput, index, true);
					}
				}
			},
			submitReply(userId, commentId) {//回复评论
				this.postWriteBack(userId, commentId);
				this.replyInput = '';
				this.getCommtens();
				this.showReplyInput = [];
			},
			expandReplies(index) {
				// 保存当前滚动位置
				this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
				//内容展开
				this.$set(this.CommentData[index], 'expanded', true);
				// 等待 Vue 更新 DOM 完成后滚动到之前的位置
				this.$nextTick(() => {
					window.scrollTo(0, this.scrollPosition);
				});
			},
			collapseReplies(index) {
				// 收起内容
				this.$set(this.CommentData[index], 'expanded', false);
			},
			errorHandler() {
				return true
			},
			goBack() {
				// window.location.href = "/Communication";
				this.$router.push({
					path: `/Communication`
				}).catch(err => err);
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getCommtens()
			},
			getId() {
				return this.$route.params.postId;
			},
			async getPostDetail() {
				const res = await postApi.getPostDetail("znExchangePost/getPostDetail/" + this.getId());
				if (res.code == 200) {
					this.PostData = res.data
				} else {
					this.$message.warning('数据异常，请联系管理员');
				}
			},
			async getCommtens() { //查询所有根评论与子评论
				const res = await postApi.getCommtens("znExchangeComment/queryComments", {
					postId: this.getId(),
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				})
				if (res.code == 200) {
					this.CommentData = res.data.records;
					this.total = res.data.total;
				} else {
					this.$message.warning(res.msg);
				}
			},
			async postAddComment() {
				//发表评论
				let comment = {
					commentContent: this.input,
					postId: this.getId(),
				}
				const res = await postApi.postAddComment("znExchangeComment/postAddComment", comment)
				if (res.code == 200) {
					this.$message.success(res.msg);
					this.getCommtens();
					this.input = "";
				} else {
					this.$message.success(res.msg);
				}
			},
			async postWriteBack(userId, commentId) {
				//回复评论
				let reply = {
					commentContent: this.replyInput,
					postId: this.getId(),
					userId: userId,
					commentId: commentId
				}
				const res = await postApi.postWriteBack("znExchangeComment/postWriteBack", reply)
				if (res.code == 200) {
					this.$message.success(res.msg);
					this.getCommtens();
				} else {
					this.$message.success(res.msg);
				}
			}
		},
		mounted() {
			const postId = this.getId();
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.getPostDetail();
			this.getCommtens();
		}
	}
</script>

<style lang="scss" scoped>
	.mainBody {
		margin: 0 15% 0 15%;

		.Back {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			/* 控制浮动层级 */
		}

		.postDetailBody {
			display: flex;

			.box-card1 {
				width: 20%;
				height: 50vh;
				margin-left: 10px;
			}

			.box-card2 {
				width: 80%;
				h2 {
					text-align: left;
					line-height: 0;
				}

				.content_click {
					width: 100%;
					height: 30px;
					line-height: 30px;
					font-size: 11px;
					color: #999;
					margin: 10px auto;
					border-bottom: 1px dashed #ddd;
				}
			}
		}

		.box-card3 {
			width: 80%;
			margin-top: 20px;
			.commentHead {
				display: flex;
				align-items: center;

				.commQuantity {
					display: flex;
					align-items: center;

					.pinglun {
						font-size: 30px;
						font-weight: 700;
					}

					.shumu {
						font-size: 20px;
						color: #9499a0;
						margin: 0 0 0 12px;
						line-height: 0;
					}
				}

				.commSort {
					font-size: 18px;
					color: #9499a0;
					line-height: 0;
					display: flex;
					align-items: center;
					margin-left: 46px;

					a {
						text-decoration: none;
						color: #9499a0;
					}

					a:hover {
						color: #00aeec;
					}

					a.active {
						color: #18191c;
					}


				}
			}

			.commentInput {
				display: flex;
				align-items: center;
				margin: 15px 0 15px 0;

				.el-avatar {
					margin: 0 30px 0 30px;
				}
			}

			.issueBtn {
				display: flex;
				justify-content: flex-end;
				margin-bottom: 35px;

				.el-button {
					background-color: #00aeec;
					font-size: 16px;
				}

				.el-button:hover {
					background-color: #409eff;
				}
			}

			.commentMain {
				width: 100%;
				.footer_page {
					height: 10%;
					position: relative;

					.el-pagination {
						position: absolute;
						right: 38%;
						bottom: 50%;
						transform: translateY(50%);
					}
				}

				.ReplyDetails {
					margin: 20px 0 20px 0;

					.commContent {
						display: flex;
					}

					.commentLine {
						margin-left: 10%;
						border-bottom: 1px dashed #d0d0d0;
					}

					.rootReview {
						display: flex;

						.el-avatar {
							margin: 0 15px 0 30px;
						}

						.content-warp {
							display: flex;
							flex-direction: column;
							flex: 1;
							padding-bottom: 20px;

							.replyInput {
								display: flex;
								margin-top: 10px;
								width: 70%;
							}

							.replyInput .el-input__inner::placeholder {
								text-align: center;
								white-space: pre-line;
								/* 让文字根据需求进行换行 */
							}

							.uNickname {
								color: #61666d;
								font-weight: 500;
								font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, sans-serif;
								font-size: 18px;
							}

							.reply-content {
								fcolor: #18191c;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-word;
								white-space: pre-wrap;
								line-height: 24px;
								vertical-align: baseline;
								font-size: 20px;
							}

							.content_click {
								display: flex;
								align-items: center;
								position: relative;
								margin-top: 5px;
								font-size: 13px;
								color: #9499a0;

								.reply {
									margin-left: 20px;
									cursor: pointer;

								}

								.reply:hover {
									color: #00aeec;
								}
							}
						}
					}

					.subComment {
						margin: 0 0 0 50px;

						.footer_page2 {
							height: 10%;
							margin-left: 54px;
						}

						.el-avatar {
							margin: 0 15px 0 58px;
						}

						.content-warp {
							display: flex;
							flex-direction: column;
							flex: 1;
							padding-bottom: 20px;

							.replyInput {
								display: flex;
								margin-top: 10px;
								width: 70%;
							}

							.replyContent {
								display: flex;
								align-items: center;

								.uNickname {
									margin-right: 5px;
									color: #61666d;
									font-weight: 500;
									font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, sans-serif;
									font-size: 17px;
								}

								.replyWords {
									margin: 5px;
									color: #18191c;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-word;
									white-space: pre-wrap;
									line-height: 24px;
									vertical-align: baseline;
									font-size: 20px;
								}

								.replyWords2 {
									margin: 0 5px 0 0;
									color: #008ac5;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-word;
									white-space: pre-wrap;
									line-height: 24px;
									vertical-align: baseline;
									font-size: 20px;
								}

								.reply-content {
									color: #18191c;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-word;
									white-space: pre-wrap;
									line-height: 24px;
									vertical-align: baseline;
									font-size: 20px;

								}
							}

							.content_click {
								display: flex;
								align-items: center;
								position: relative;
								margin-top: 5px;
								font-size: 13px;
								color: #9499a0;

								.reply {
									margin-left: 20px;
									cursor: pointer;
								}

								.reply:hover {
									color: #00aeec;
								}
							}
						}

						.clickView {
							margin: 0 0 20px 50px;
							padding-left: 8px;
							font-size: 13px;
							color: #9499a0;

							.View {
								padding-left: 8px;
								font-size: 13px;
								color: #9499a0;
								cursor: pointer;
							}

							.View:hover {
								color: #00aeec;
							}
						}

					}
				}
			}

		}

	}
</style>